<template>
  <div class="guide-qualification-page">
    <div class="page-header mb-6">
      <div class="flex items-center justify-between">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
          导游资质审核
        </h2>
        <div class="flex items-center space-x-2">
          <el-button @click="handleExport">
            <el-icon class="mr-1"><Download /></el-icon>导出数据
          </el-button>
        </div>
      </div>
    </div>

    <!-- 搜索和筛选 -->
    <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm mb-6">
      <div class="flex flex-wrap gap-4 mb-4">
        <el-input
          v-model="searchForm.keyword"
          placeholder="搜索导游姓名/ID/手机号"
          class="!w-64"
          clearable
          @keyup.enter="handleSearch"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>

        <el-select
          v-model="searchForm.status"
          placeholder="审核状态"
          clearable
          class="!w-32"
        >
          <el-option label="全部" value="" />
          <el-option label="待审核" value="pending" />
          <el-option label="已通过" value="approved" />
          <el-option label="已拒绝" value="rejected" />
        </el-select>

        <el-date-picker
          v-model="searchForm.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          class="!w-80"
        />

        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </div>
    </div>

    <!-- 资质审核列表 -->
    <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm">
      <el-tabs v-model="activeTab" @tab-click="handleTabChange">
        <el-tab-pane label="待审核" name="pending">
          <template #label>
            待审核
            <el-badge
              v-if="tabCounts.pending"
              :value="tabCounts.pending"
              class="ml-2"
              type="danger"
            />
          </template>
        </el-tab-pane>
        <el-tab-pane label="已通过" name="approved">
          <template #label>
            已通过
            <el-badge
              v-if="tabCounts.approved"
              :value="tabCounts.approved"
              class="ml-2"
              type="success"
            />
          </template>
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="rejected">
          <template #label>
            已拒绝
            <el-badge
              v-if="tabCounts.rejected"
              :value="tabCounts.rejected"
              class="ml-2"
              type="info"
            />
          </template>
        </el-tab-pane>
      </el-tabs>

      <el-table
        v-loading="loading"
        :data="qualificationList"
        border
        style="width: 100%"
        row-key="id"
      >
        <el-table-column label="导游信息" min-width="250">
          <template #default="{ row }">
            <div class="flex items-center space-x-3">
              <el-avatar :size="50" :src="row.avatar" />
              <div>
                <div class="flex items-center">
                  <span class="font-medium text-gray-900 dark:text-white">{{
                    row.name
                  }}</span>
                  <el-tag
                    v-if="row.status === 'pending'"
                    type="warning"
                    size="small"
                    class="ml-2"
                    >待审核</el-tag
                  >
                  <el-tag
                    v-else-if="row.status === 'approved'"
                    type="success"
                    size="small"
                    class="ml-2"
                    >已通过</el-tag
                  >
                  <el-tag
                    v-else-if="row.status === 'rejected'"
                    type="danger"
                    size="small"
                    class="ml-2"
                    >已拒绝</el-tag
                  >
                </div>
                <div class="text-sm text-gray-500 mt-1">ID: {{ row.id }}</div>
                <div class="text-sm text-gray-500">手机: {{ row.phone }}</div>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="资质信息" min-width="200">
          <template #default="{ row }">
            <div class="space-y-1">
              <div class="text-sm">
                <span class="text-gray-500">证件类型：</span>
                <span>{{ row.certificateType }}</span>
              </div>
              <div class="text-sm">
                <span class="text-gray-500">证件号码：</span>
                <span>{{ row.certificateNumber }}</span>
              </div>
              <div class="text-sm">
                <span class="text-gray-500">发证机构：</span>
                <span>{{ row.issuingAuthority }}</span>
              </div>
              <div class="text-sm">
                <span class="text-gray-500">有效期至：</span>
                <span>{{ row.expiryDate }}</span>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="申请信息" min-width="180">
          <template #default="{ row }">
            <div class="space-y-1">
              <div class="text-sm">
                <span class="text-gray-500">申请时间：</span>
                <span>{{ formatDateTime(row.applyTime) }}</span>
              </div>
              <div class="text-sm">
                <span class="text-gray-500">从业经验：</span>
                <span>{{ row.experience }}年</span>
              </div>
              <div class="text-sm">
                <span class="text-gray-500">语言能力：</span>
                <span>{{ row.languages.join("、") }}</span>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="证件照片" min-width="120">
          <template #default="{ row }">
            <div class="flex space-x-2">
              <el-image
                v-for="(img, index) in row.certificateImages"
                :key="index"
                :src="img"
                fit="cover"
                class="w-16 h-16 rounded cursor-pointer"
                @click="handlePreviewImage(row.certificateImages, index)"
              >
                <template #error>
                  <div class="image-error">
                    <el-icon><Picture /></el-icon>
                  </div>
                </template>
              </el-image>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="审核信息" min-width="180">
          <template #default="{ row }">
            <div v-if="row.status === 'pending'" class="text-sm text-warning">
              等待审核
            </div>
            <div v-else class="space-y-1">
              <div class="text-sm">
                <span class="text-gray-500">审核人：</span>
                <span>{{ row.reviewer }}</span>
              </div>
              <div class="text-sm">
                <span class="text-gray-500">审核时间：</span>
                <span>{{ formatDateTime(row.reviewTime) }}</span>
              </div>
              <div class="text-sm" v-if="row.status === 'rejected'">
                <span class="text-gray-500">拒绝原因：</span>
                <span class="text-red-500">{{ row.rejectReason }}</span>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" width="120">
          <template #default="{ row }">
            <div class="flex flex-col space-y-1 items-end">
              <el-button
                v-if="row.status === 'pending'"
                size="small"
                type="success"
                class="op-btn"
                @click="handleApprove(row)"
                >通过</el-button
              >
              <el-button
                v-if="row.status === 'pending'"
                size="small"
                type="danger"
                class="op-btn"
                @click="handleReject(row)"
                >拒绝</el-button
              >
              <el-button
                size="small"
                class="op-btn"
                @click="handleViewDetail(row)"
                >详情</el-button
              >
            </div>
          </template>
        </el-table-column>
        
        <template #empty>
          <div class="empty-state">
            <el-empty 
              description="暂无资质审核数据" 
              :image-size="200"
            >
              <div class="empty-text">当前没有需要审核的导游资质</div>
              <div class="empty-subtext">导游提交资质认证申请后会在此处显示</div>
            </el-empty>
          </div>
        </template>
      </el-table>

      <!-- 分页 -->
      <div class="flex justify-end mt-4">
        <el-pagination
          v-model:current-page="page"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 拒绝原因对话框 -->
    <el-dialog
      v-model="rejectDialogVisible"
      title="拒绝原因"
      width="500px"
      destroy-on-close
    >
      <el-form :model="rejectForm" label-width="80px">
        <el-form-item label="拒绝原因" prop="reason">
          <el-select
            v-model="rejectForm.reason"
            placeholder="请选择拒绝原因"
            class="w-full"
          >
            <el-option label="证件信息不符" value="invalid_certificate" />
            <el-option label="证件照片模糊" value="blurry_image" />
            <el-option label="证件已过期" value="expired_certificate" />
            <el-option label="信息不完整" value="incomplete_info" />
            <el-option label="其他原因" value="other" />
          </el-select>
        </el-form-item>
        <el-form-item label="详细说明">
          <el-input
            v-model="rejectForm.comment"
            type="textarea"
            rows="4"
            placeholder="请输入详细说明"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="flex justify-end">
          <el-button @click="rejectDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmReject">确认</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 图片预览 -->
    <el-image-viewer
      v-if="previewVisible"
      :url-list="previewImages"
      :initial-index="previewIndex"
      @close="previewVisible = false"
    />

    <!-- 详情模态框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="导游资质详情"
      width="700px"
      destroy-on-close
      append-to-body
      :before-close="handleCloseDetailDialog"
      @open="disableBodyScroll"
      @close="enableBodyScroll"
      class="qualification-detail-dialog"
    >
      <div v-if="currentDetail" class="guide-detail dialog-scrollable">
        <div class="flex items-start mb-6">
          <el-avatar :size="80" :src="currentDetail.avatar" class="mr-4" />
          <div class="flex-1">
            <h3 class="text-xl font-bold mb-2">{{ currentDetail.name }}</h3>
            <div class="grid grid-cols-2 gap-3">
              <div class="text-sm">
                <span class="text-gray-500">导游ID：</span>
                <span>{{ currentDetail.id }}</span>
              </div>
              <div class="text-sm">
                <span class="text-gray-500">联系电话：</span>
                <span>{{ currentDetail.phone }}</span>
              </div>
              <div class="text-sm">
                <span class="text-gray-500">申请时间：</span>
                <span>{{ formatDateTime(currentDetail.applyTime) }}</span>
              </div>
              <div class="text-sm">
                <span class="text-gray-500">审核状态：</span>
                <el-tag :type="getStatusType(currentDetail.status)">
                  {{ getStatusText(currentDetail.status) }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>

        <el-divider content-position="left">资质信息</el-divider>
        <div class="grid grid-cols-2 gap-4 mb-6">
          <div class="text-sm">
            <span class="text-gray-500">证件类型：</span>
            <span>{{ currentDetail.certificateType }}</span>
          </div>
          <div class="text-sm">
            <span class="text-gray-500">证件号码：</span>
            <span>{{ currentDetail.certificateNumber }}</span>
          </div>
          <div class="text-sm">
            <span class="text-gray-500">发证机构：</span>
            <span>{{ currentDetail.issuingAuthority }}</span>
          </div>
          <div class="text-sm">
            <span class="text-gray-500">有效期至：</span>
            <span>{{ currentDetail.expiryDate }}</span>
          </div>
          <div class="text-sm">
            <span class="text-gray-500">从业经验：</span>
            <span>{{ currentDetail.experience }}年</span>
          </div>
          <div class="text-sm">
            <span class="text-gray-500">语言能力：</span>
            <span>{{ currentDetail.languages.join("、") }}</span>
          </div>
        </div>

        <el-divider content-position="left">证件照片</el-divider>
        <div class="flex flex-wrap gap-4 mb-6">
          <div
            v-for="(img, index) in currentDetail.certificateImages"
            :key="index"
            class="relative"
          >
            <el-image
              :src="img"
              fit="cover"
              class="w-32 h-32 rounded cursor-pointer"
              @click="
                handlePreviewImage(currentDetail.certificateImages, index)
              "
            >
              <template #error>
                <div class="image-error">
                  <el-icon><Picture /></el-icon>
                </div>
              </template>
            </el-image>
            <div class="mt-1 text-xs text-center text-gray-500">
              证件照片{{ index + 1 }}
            </div>
          </div>
        </div>

        <el-divider
          content-position="left"
          v-if="currentDetail.status !== 'pending'"
          >审核信息</el-divider
        >
        <div class="mb-6" v-if="currentDetail.status !== 'pending'">
          <div class="text-sm mb-2">
            <span class="text-gray-500">审核人：</span>
            <span>{{ currentDetail.reviewer }}</span>
          </div>
          <div class="text-sm mb-2">
            <span class="text-gray-500">审核时间：</span>
            <span>{{ formatDateTime(currentDetail.reviewTime) }}</span>
          </div>
          <div class="text-sm" v-if="currentDetail.status === 'rejected'">
            <span class="text-gray-500">拒绝原因：</span>
            <span class="text-red-500">{{ currentDetail.rejectReason }}</span>
          </div>
        </div>

        <template v-if="currentDetail.status === 'pending'">
          <el-divider></el-divider>
          <div class="flex justify-center gap-4">
            <el-button type="success" @click="handleApprove(currentDetail)"
              >通过审核</el-button
            >
            <el-button type="danger" @click="handleReject(currentDetail)"
              >拒绝审核</el-button
            >
          </div>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Search, Download, Picture } from "@element-plus/icons-vue";
import dayjs from "dayjs";
import * as XLSX from 'xlsx';
import axios from '@/api/axios';

const route = useRoute();
const router = useRouter();
const loading = ref(false);
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const activeTab = ref("pending");

// 是否根据导游ID筛选
const guideId = computed(() => route.query.guideId);

// 搜索表单
const searchForm = reactive({
  keyword: "",
  status: "",
  dateRange: [],
});

// 各标签页数量统计
const tabCounts = reactive({
  pending: 0,
  approved: 0,
  rejected: 0,
});

// 模拟数据（作为备用）
const mockQualificationList = [
  {
    id: 1,
    name: "李明",
    avatar: "/images/guides/guide1.jpg",
    status: "pending",
    id: 1001,
    phone: "13800138000",
    certificateType: "导游资格证",
    certificateNumber: "GZ202301001",
    issuingAuthority: "国家旅游局",
    expiryDate: "2028-06-15",
    applyTime: "2023-06-15 10:30:00",
    experience: 5,
    languages: ["中文", "英语"],
    certificateImages: [
      "/images/certificates/cert1.jpg",
      "/images/certificates/cert2.jpg",
    ],
    reviewer: "",
    reviewTime: "",
    rejectReason: "",
  },
  {
    id: 2,
    name: "张华",
    avatar: "/images/guides/guide2.jpg",
    status: "approved",
    id: 1002,
    phone: "13900139000",
    certificateType: "导游等级证",
    certificateNumber: "GZ202302002",
    issuingAuthority: "广西旅游局",
    expiryDate: "2026-04-20",
    applyTime: "2023-04-20 14:15:00",
    experience: 8,
    languages: ["中文", "粤语"],
    certificateImages: [
      "/images/certificates/cert3.jpg",
      "/images/certificates/cert4.jpg",
    ],
    reviewer: "管理员A",
    reviewTime: "2023-04-22 09:30:00",
    rejectReason: "",
  },
  {
    id: 3,
    name: "王丽",
    avatar: "/images/guides/guide3.jpg",
    status: "rejected",
    id: 1003,
    phone: "13700137000",
    certificateType: "导游资格证",
    certificateNumber: "GZ202303003",
    issuingAuthority: "国家旅游局",
    expiryDate: "2025-09-10",
    applyTime: "2023-09-10 09:45:00",
    experience: 3,
    languages: ["中文", "英语"],
    certificateImages: [
      "/images/certificates/cert5.jpg",
      "/images/certificates/cert6.jpg",
    ],
    reviewer: "管理员B",
    reviewTime: "2023-09-12 11:20:00",
    rejectReason: "证件照片不清晰，请重新上传。",
  },
];

const qualificationList = ref([]);

// 格式化日期时间
const formatDateTime = (date) => {
  return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
};

// 获取资质审核列表
const getQualificationList = async () => {
  loading.value = true;
  try {
    const params = {
      page: page.value,
      pageSize: pageSize.value,
      status: activeTab.value !== 'all' ? activeTab.value : undefined,
      ...searchForm,
    };
    
    // 如果有日期范围，处理日期参数
    if (searchForm.dateRange && searchForm.dateRange.length === 2) {
      params.startDate = searchForm.dateRange[0];
      params.endDate = searchForm.dateRange[1];
      delete params.dateRange;
    }
    
    // 如果从导游详情页过来，添加导游ID筛选
    if (guideId.value) {
      params.guideId = guideId.value;
    }
    
    const response = await axios.get('/admin/guides/qualifications', { params });
    
    if (response && response.code === 200 && response.data) {
      qualificationList.value = response.data.list || [];
      total.value = response.data.total || 0;
      
      // 更新各标签页数量
      if (response.data.counts) {
        Object.keys(tabCounts).forEach(key => {
          tabCounts[key] = response.data.counts[key] || 0;
        });
      }
    } else {
      // 使用测试数据
      qualificationList.value = mockQualificationList.filter(item => {
        if (activeTab.value !== 'all' && item.status !== activeTab.value) return false;
        if (guideId.value && item.id.toString() !== guideId.value.toString()) return false;
        return true;
      });
      total.value = qualificationList.value.length;
      
      // 模拟各标签页数量
      let counts = mockQualificationList.reduce((acc, curr) => {
        acc[curr.status] = (acc[curr.status] || 0) + 1;
        return acc;
      }, {});
      
      Object.keys(tabCounts).forEach(key => {
        tabCounts[key] = counts[key] || 0;
      });
    }
  } catch (error) {
    console.error("获取资质审核列表失败:", error);
    ElMessage.error("获取资质审核列表失败，使用测试数据");
    // 使用测试数据
    qualificationList.value = mockQualificationList.filter(item => {
      if (activeTab.value !== 'all' && item.status !== activeTab.value) return false;
      if (guideId.value && item.id.toString() !== guideId.value.toString()) return false;
      return true;
    });
    total.value = qualificationList.value.length;
    
    // 模拟各标签页数量
    let counts = mockQualificationList.reduce((acc, curr) => {
      acc[curr.status] = (acc[curr.status] || 0) + 1;
      return acc;
    }, {});
    
    Object.keys(tabCounts).forEach(key => {
      tabCounts[key] = counts[key] || 0;
    });
  } finally {
    loading.value = false;
  }
};

// 搜索
const handleSearch = () => {
  page.value = 1;
  getQualificationList();
};

// 重置搜索
const resetSearch = () => {
  Object.keys(searchForm).forEach((key) => {
    searchForm[key] = "";
  });
  searchForm.dateRange = [];
  page.value = 1;
  getQualificationList();
};

// 处理标签页切换
const handleTabChange = () => {
  page.value = 1;
  getQualificationList();
};

// 图片预览相关
const previewImages = ref([]);
const previewIndex = ref(0);
const previewVisible = ref(false);

// 预览图片
const handlePreviewImage = (images, index) => {
  previewImages.value = images;
  previewIndex.value = index;
  previewVisible.value = true;
};

// 关闭预览
const closePreview = () => {
  previewVisible.value = false;
};

// 查看详情
const handleViewDetail = (row) => {
  currentDetail.value = row;
  detailDialogVisible.value = true;
};

// 通过审核
const handleApprove = async (row) => {
  try {
    await ElMessageBox.confirm(
      `确定要通过 ${row.name} 的导游资质认证申请吗？`,
      "审核通过",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "success",
      }
    );

    try {
      await axios.put(`/admin/guides/qualifications/${row.id}/approve`, {
        reviewer: localStorage.getItem('adminName') || '管理员',
        reviewTime: new Date(),
      });
      
      ElMessage.success("资质认证已通过");
      getQualificationList();
    } catch (error) {
      console.error("审核操作失败:", error);
      ElMessage.error("审核操作失败");
    }
  } catch (error) {
    if (error === "cancel") return;
  }
};

// 拒绝审核
const handleReject = async (row) => {
  rejectDialogVisible.value = true;
  currentDetail.value = row;
  rejectForm.id = row.id;
  rejectForm.reason = "";
};

// 提交拒绝理由
const handleRejectSubmit = async () => {
  if (!rejectForm.reason.trim()) {
    ElMessage.warning("请输入拒绝理由");
    return;
  }

  try {
    await axios.put(`/admin/guides/qualifications/${rejectForm.id}/reject`, {
      rejectReason: rejectForm.reason,
      reviewer: localStorage.getItem('adminName') || '管理员',
      reviewTime: new Date(),
    });
    
    ElMessage.success("已拒绝资质认证申请");
    rejectDialogVisible.value = false;
    getQualificationList();
  } catch (error) {
    console.error("拒绝操作失败:", error);
    ElMessage.error("拒绝操作失败");
  }
};

// 返回
const goBack = () => {
  router.back();
};

// 导出数据
const handleExport = () => {
  // 准备导出数据
  const exportData = qualificationList.value.map(item => ({
    导游ID: item.id,
    导游姓名: item.name,
    手机号: item.phone,
    证件类型: item.certificateType,
    证件号码: item.certificateNumber,
    发证机构: item.issuingAuthority,
    有效期至: item.expiryDate,
    申请时间: formatDateTime(item.applyTime),
    从业经验: `${item.experience}年`,
    语言能力: item.languages.join('、'),
    审核状态: item.status === 'pending' ? '待审核' : 
              item.status === 'approved' ? '已通过' : '已拒绝',
    审核人: item.reviewer || '-',
    审核时间: item.reviewTime ? formatDateTime(item.reviewTime) : '-',
    拒绝原因: item.rejectReason || '-'
  }));

  // 创建工作簿
  const workbook = XLSX.utils.book_new();
  const worksheet = XLSX.utils.json_to_sheet(exportData);
  
  // 添加工作表到工作簿
  XLSX.utils.book_append_sheet(workbook, worksheet, '导游资质审核');
  
  // 导出Excel文件
  XLSX.writeFile(workbook, `导游资质审核_${dayjs().format('YYYYMMDD_HHmmss')}.xlsx`);
  
  ElMessage.success("导游资质审核数据导出成功");
};

// 分页相关
const handleSizeChange = (val) => {
  pageSize.value = val;
  getQualificationList();
};

const handleCurrentChange = (val) => {
  page.value = val;
  getQualificationList();
};

// 详情对话框相关
const detailDialogVisible = ref(false);
const currentDetail = ref(null);

// 拒绝对话框相关
const rejectDialogVisible = ref(false);
const rejectForm = reactive({
  id: null,
  reason: "",
});

// 禁用/启用页面滚动
const disableBodyScroll = () => {
  document.body.style.overflow = "hidden";
};

const enableBodyScroll = () => {
  document.body.style.overflow = "";
};

// 关闭详情模态框
const handleCloseDetailDialog = () => {
  detailDialogVisible.value = false;
};

// 获取状态对应的类型
const getStatusType = (status) => {
  const typeMap = {
    pending: "warning",
    approved: "success",
    rejected: "danger",
  };
  return typeMap[status] || "info";
};

// 获取状态对应的文本
const getStatusText = (status) => {
  const textMap = {
    pending: "待审核",
    approved: "已通过",
    rejected: "已拒绝",
  };
  return textMap[status] || "未知状态";
};

// 页面加载时获取数据
onMounted(() => {
  // 如果从导游详情页过来，设置关键字为导游ID，以便搜索
  if (guideId.value) {
    searchForm.guideId = guideId.value;
  }
  
  getQualificationList();
});
</script>

<style lang="scss" scoped>
.guide-qualification-page {
  padding: 20px;

  :deep(.el-tabs__header) {
    margin-bottom: 20px;
  }

  :deep(.el-table) {
    --el-table-border-color: var(--el-border-color-lighter);
    --el-table-header-bg-color: var(--el-fill-color-light);

    .el-table__header th {
      font-weight: 600;
      color: var(--el-text-color-primary);
    }

    .dark & {
      --el-table-border-color: var(--el-border-color-darker);
      --el-table-header-bg-color: var(--el-bg-color-overlay);

      .el-table__header th {
        color: var(--el-text-color-primary);
      }
    }
  }

  .image-error {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: var(--el-fill-color-light);
    color: var(--el-text-color-secondary);
    font-size: 20px;
  }
}

// 添加模态框样式
:deep(.qualification-detail-dialog) {
  .el-dialog__header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--el-bg-color);
    margin-right: 0;
    padding: 20px 20px 10px;
    border-bottom: 1px solid var(--el-border-color-lighter);
  }

  .el-dialog__body {
    padding: 0;
    max-height: calc(80vh - 120px);
    overflow-y: auto;
  }

  .dialog-scrollable {
    padding: 20px;
  }

  .el-dialog__footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background-color: var(--el-bg-color);
    padding: 10px 20px 20px;
    border-top: 1px solid var(--el-border-color-lighter);
  }
}

// 添加样式
.op-btn {
  width: 90px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.empty-state {
  padding: 30px 0;
  max-height: 400px;
}

.empty-text {
  font-size: 16px;
  color: var(--el-text-color-secondary);
  margin-top: 10px;
}

.empty-subtext {
  font-size: 14px;
  color: var(--el-text-color-placeholder);
  margin-top: 5px;
}

.mt-4 {
  margin-top: 16px;
}
</style>
